<template>
  <header>
    <h2>销量总数</h2>
    <div class='chart' id='oneChart'>
      图表内容
    </div>
  </header>
</template>

<script lang="ts">
import { inject, onMounted, reactive } from 'vue'
export default {
  data () {
    return {
    }
  },

  components: {},

  setup () {
    var $echarts:any = inject('echarts')
    var chartData = [
      { title: '冰箱', num: 1827 },
      { title: '洗衣机', num: 342 },
      { title: '电视机', num: 541 },
      { title: '微波炉', num: 1347 },
      { title: '烤箱', num: 2431 },
      { title: '空调', num: 876 },
      { title: '洗碗机', num: 1578 }
    ]

    // 创建一个对象变量
    // 创建两个数组变量
    var data:any = reactive({})
    var xData:number[] = reactive([])
    var yData:number[] = reactive([])

    // 处理数据
    function setData () {
      xData = chartData.map(v => v.num)
      yData = chartData.map(v => v.num)
    }

    onMounted(() => {
      // init初始化echarts图表
      var myChart = $echarts.init(document.getElementById('oneChart'))
      setData()

      myChart.setOption({
        grid: {
          top: '3%',
          left: '1%',
          right: '6%',
          bottom: '3%',
          // 以上设置的位置，对坐标轴也起作用
          containLabel: true
        },
        xAxis: {
          type: 'value',
          axisLine: {
            lineStyle: {
              color: '#fff'
            }
          }
        },
        yAxis: {
          type: 'category',
          data: xData,
          axisLine: {
            lineStyle: {
              color: '#fff'
            }
          }
        },
        series: [
          {
            type: 'bar',
            data: yData,
            itemStyle: {
              normal: {
                // 柱状图圆角
                barBorderRadius: [0, 20, 20, 0],
                // 配置渐变颜色
                color: new $echarts.graphic.LinearGradient(0, 0, 1, 0, [
                  {
                    offset: 0,
                    color: '#005eaa'
                  },
                  {
                    offset: 0.5,
                    color: '#339ca8'
                  },
                  {
                    offset: 1,
                    color: '#cda819'
                  }
                ])
              }
            }
          }
        ]
      })
    })

    return {
      data,
      xData,
      yData,
      setData
    }
  }
}

</script>
<style lang='scss' scoped>
.chart {
  height: 4.375rem;
}
h2 {
  height: .3125rem;
  color: #fff;
  line-height: .3125rem;
  font-size: .25rem;
  text-align: center;
}
</style>
